import { getLayout } from '@components/Layouts/Layout'; import PostPreview from '@components/PostPreview/PostPreview'; import { t } from '@lingui/macro'; import { NextPageWithLayout } from '@ts/types/app'; import { SubjectPreview, ThematicProps } from '@ts/types/taxonomies'; import { loadTranslation } from '@utils/helpers/i18n'; import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from 'next'; import { ParsedUrlQuery } from 'querystring'; import styles from '@styles/pages/Page.module.scss'; import { getAllThematicsSlug, getThematicBySlug, } from '@services/graphql/queries'; import PostHeader from '@components/PostHeader/PostHeader'; import ToC from '@components/ToC/ToC'; import { RelatedTopics, ThematicsList } from '@components/Widget'; import { useRef } from 'react'; import { ArticleMeta } from '@ts/types/articles'; import Head from 'next/head'; const Thematic: NextPageWithLayout = ({ thematic }) => { const relatedSubjects = useRef([]); const updateRelatedSubjects = (newSubjects: SubjectPreview[]) => { newSubjects.forEach((subject) => { const subjectIndex = relatedSubjects.current.findIndex( (relatedSubject) => relatedSubject.id === subject.id ); const hasSubject = subjectIndex === -1 ? false : true; if (!hasSubject) relatedSubjects.current.push(subject); }); }; const getPostsList = () => { return [...thematic.posts].reverse().map((post) => { updateRelatedSubjects(post.subjects); return (
    • ); }); }; const meta: ArticleMeta = { dates: thematic.dates, }; return ( <> {thematic.seo.title}
    {thematic.posts.length > 0 && (

    {t`All posts in ${thematic.title}`}

      {getPostsList()}
    )}
    ); }; Thematic.getLayout = getLayout; interface PostParams extends ParsedUrlQuery { slug: string; } export const getStaticProps: GetStaticProps = async ( context: GetStaticPropsContext ) => { const translation = await loadTranslation( context.locale!, process.env.NODE_ENV === 'production' ); const { slug } = context.params as PostParams; const thematic = await getThematicBySlug(slug); const breadcrumbTitle = thematic.title; return { props: { breadcrumbTitle, thematic, translation, }, }; }; export const getStaticPaths: GetStaticPaths = async () => { const allSlugs = await getAllThematicsSlug(); return { paths: allSlugs.map((post) => `/thematique/${post.slug}`), fallback: true, }; }; export default Thematic;